<template>
  <Dialog title="成立活动" v-model="dialogVisible" width="80%">
    <el-card>
      <div class="mb3 color-red">
        <!-- <div class="mb3 color-red" v-if="data?.currentReceipts < data.totalCost"> -->
        <el-icon>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728="">
            <path
              fill="currentColor"
              d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768m48-176a48 48 0 1 1-96 0 48 48 0 0 1 96 0m-48-464a32 32 0 0 1 32 32v288a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32"
            />
          </svg>
        </el-icon>
        当前<b>报名人数未满</b>、<b>实收总价＜成本总价</b>，确定成立该活动么？
      </div>

      <!-- 基本信息 -->
      <el-descriptions :column="2">
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="报名人数" />
          </template>
          男 - {{ data.registeredMenNum }}/{{ data.menNum }}人，女 -
          {{ data.registeredWomenNum }}/{{ data.womenNum }}人
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="活动费用/人" />
          </template>
          ¥{{ data.activeCost }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="活动应收总价" />
          </template>
          ¥{{ data.totalPriceReceivable }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="目前实收" />
          </template>
          ¥{{ data.currentReceipts }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="成本总价" />
          </template>
          ¥{{ data.totalCost }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 商家列表 -->
      <el-descriptions :column="1" border>
        <el-descriptions-item label="商家" label-class-name="color-gray" class-name="color-gray">
          供货价
        </el-descriptions-item>
        <template v-for="(item, index) in data.packageProductRespVOList" :key="index">
          <el-descriptions-item :label="item.merchantName" label-class-name="color-white">
            {{ item.supplyPrice }}
          </el-descriptions-item>
        </template>
      </el-descriptions>
    </el-card>

    <template #footer>
      <el-button @click="submitForm" type="primary">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import * as ActivityInfoApi from '@/api/blind/activityInfo'
const dialogVisible = ref(false) // 弹窗的是否展示
const data = ref<ActivityInfoApi.ActivityInfoVO>({} as ActivityInfoApi.ActivityInfoVO)

/** 打开弹窗 */
const open = async (id?: number) => {
  dialogVisible.value = true

  // 修改时，设置数据
  if (id) {
    const fetchData = await ActivityInfoApi.getActivityInfo(id)
    data.value = fetchData
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  await ActivityInfoApi.updateActivityInfo({
    id: 1,
    status: 1
  })
}
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* stylelint-disable-next-line rule-empty-line-before */
:deep(.color-gray) {
  background: var(--el-descriptions-item-bordered-label-background) !important;
}
/* stylelint-disable-next-line rule-empty-line-before */
:deep(.color-white) {
  background: #fff !important;
}
</style>
